<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<style>

    #bootstrap-table tr:nth-child(even) {
        background: transparent !important;
    }

    #bootstrap-table th {
        background: transparent !important;
    }

    #bootstrap-table a {
        width: 100%;
        height: 100%;
        display: block;
        color: #000000;
    }

    #bootstrap-table a:hover {
        color: #000000;
    }

    #bootstrap-table a:visited {
        color: #000000;
    }

    #bootstrap-table a:active {
        color: #000000;
    }
</style>
<body class="hold-transition skin-yellow sidebar-mini">
<section class="content-header">
    <h1>生产进度查看</h1>
</section>
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <form id="queryForm" class="form-horizontal">
                        <div class="row">
                            <div class="form-inline" style="padding-left: 15px">
                                <input id="prodNo" name="prodNo" type="hidden" style="display: none"
                                       th:value="${prodOrd.prodNo}"/>
                                <div class="form-group margin-bottom-none" style="margin-left:0px;margin-right: 25px;">
                                    <label class="control-label">
                                        生产令编号
                                    </label>
                                    <label class="control-label" th:text="${prodOrd.prodNo}">
                                    </label>
                                </div>
                                <div class="form-group margin-bottom-none" style="margin-left:0px;margin-right: 25px;">
                                    <label class="control-label">
                                        项目名称
                                    </label>
                                    <label class="control-label" th:text="${project.proName}">
                                    </label>
                                </div>
                                <div class="form-group margin-bottom-none" style="margin-left:0px;margin-right: 25px;">
                                    <label class="control-label">
                                        数量
                                    </label>
                                    <label class="control-label" th:text="${prodOrd.prodNum}">
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-inline" style="padding-left: 15px">
                                <div class="form-group margin-bottom-none" style="margin-left:0px;margin-right: 25px;">
                                    <label class="control-label">
                                        部分
                                    </label>
                                    <label class="control-label">
                                        <input class="form-control" name="part" value="" />
                                    </label>
                                </div>
                                <div class="form-group margin-bottom-none" style="margin-left:0px;margin-right: 25px;">
                                    <label class="control-label">
                                        图号
                                    </label>
                                    <label class="control-label">
                                        <input class="form-control" name="drawNo" value="" />
                                    </label>
                                </div>
                                <div class="form-group margin-bottom-none" style="margin-left:0px;margin-right: 25px;">
                                    <label class="control-label">
                                        零件名称
                                    </label>
                                    <label class="control-label">
                                        <input class="form-control" name="drawName" value="" />
                                    </label>
                                </div>
                                <div class="form-group margin-bottom-none" style="margin-left:0px;margin-right: 25px;">
                                    <label class="control-label">
                                        专业
                                    </label>
                                    <label class="control-label">
                                        <select name="special" class="form-control">
                                            <option value="">全部</option>
                                            <option value="机械">机械</option>
                                            <option value="流体">流体</option>
                                            <option value="自动化">自动化</option>
                                            <option value="外观">外观</option>
                                        </select>
                                    </label>
                                </div>
                                <div class="form-group margin-bottom-none" style="margin-left:0px;margin-right: 25px;">
                                    <label class="control-label">
                                        生产是否完成
                                    </label>
                                    <label class="control-label">
                                        <select name="isComp" class="form-control">
                                            <option value="">全部</option>
                                            <option value="1" selected="selected">未完成</option>
                                            <option value="2">已完成</option>
                                        </select>
                                    </label>
                                </div>
                                <button id="search" type="button" class="btn btn-success" onclick="loadData()">搜索</button>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="box-body">
                    <div class="bootstrap-table">
                        <div class="fixed-table-container" style="padding-bottom: 0px;">
                            <div class="fixed-table-header" style="display: none;">
                                <table></table>
                            </div>
                        </div>
                        <div class="fixed-table-body">
                            <div id="bootstrap-table-sticky-header-sticky-header-container" class="hide"></div>
                            <div id="bootstrap-table-sticky-header_sticky_anchor_begin"></div>
                            <table id="bootstrap-table" class="table table-hover table-bordered" style="table-layout: fixed;"></table>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</section>
<div th:include="include :: footer"></div>
<script th:inline="javascript">
    let table;
    var tableColumns;
    $(function () {
        loadData();
        /**
         * 表格搜索
         */
        $("#btn-search").click(function () {
            js.table.search(table);
        });
    });

    /**
     * 重新加载
     */
    function reLoad() {
        js.table.refresh(table);
    }

    /**
     * 加载数据
     */
    function loadData(){
        $.post(
            ctx + 'task/getTableColumn',
            {
                prodNo: $("#prodNo").val(),
                drawNo:$("#queryForm [name='drawNo']").val(),
                drawName:$("#queryForm [name='drawName']").val(),
                part:$("#queryForm [name='part']").val(),
                special:$("#queryForm [name='special']").val()
            },
            function (res) {
                tableColumns = res.data;
                $("#bootstrap-table").empty();
                $("#bootstrap-table").append('<thead id="bootstrap-table-sticky-header" style="font-size: 14px;"><tr id="theadTr"></tr></thead>');
                for (let i = 0; i < tableColumns.length; i++) {
                    let item = tableColumns[i];
                    if (item.title === '序号') {
                        $("#theadTr").append('<th style="padding:2px;height: 40px!important;width:50px!important;"><div class="th-inner">' + item.title + '</div><div class="fht-cell"></div></th>');
                    } else if (item.title === '图号') {
                        $("#theadTr").append('<th style="padding:2px;height: 40px!important;width:250px!important;"><div class="th-inner">' + item.title + '</div><div class="fht-cell"></div></th>');
                    } else if (item.title === '部分') {
                        $("#theadTr").append('<th style="padding:2px;height: 40px!important;width:150px!important;"><div class="th-inner">' + item.title + '</div><div class="fht-cell"></div></th>');
                    } else if (item.title === '零件名称') {
                        $("#theadTr").append('<th style="padding:2px;height: 40px!important;width:200px!important;"><div class="th-inner">' + item.title + '</div><div class="fht-cell"></div></th>');
                    } else if (item.title === '转序时间') {
                        $("#theadTr").append('<th style="padding:2px;height: 40px!important;width:90px!important;"><div class="th-inner">' + item.title + '</div><div class="fht-cell"></div></th>');
                    } else if (item.title === '转序数量') {
                        $("#theadTr").append('<th style="padding:2px;height: 40px!important;width:60px!important;"><div class="th-inner">转序<br>数量</div><div class="fht-cell"></div></th>');
                    } else {
                        $("#theadTr").append('<th style="padding:2px;height: 40px!important;width:50px!important;"><div class="th-inner">' + item.title + '</div><div class="fht-cell"></div></th>');
                    }
                }
                $.post(
                    ctx + 'task/productionSchedule/list',
                    {
                        prodNo: $("#prodNo").val(),
                        drawNo:$("#queryForm [name='drawNo']").val(),
                        drawName:$("#queryForm [name='drawName']").val(),
                        part:$("#queryForm [name='part']").val(),
                        special:$("#queryForm [name='special']").val(),
                        isComp:$("#queryForm [name='isComp']").val()
                    },
                    function (result) {
                        let list = result.data.rows;
                        $("#bootstrap-table-sticky-header_sticky_anchor_begin").text("共"+list.length+"条数据")
                        $("#bootstrap-table").append('<tbody id="tableTbody"></tbody>');
                        let maxPNum = 0;
                        for (let i = 0; i < list.length; i++) {
                            for (let key in list[i]) {
                                if (key.indexOf('processName') > -1) {
                                    let numberStr = parseInt(key.replace('processName', ''));
                                    if (numberStr > maxPNum) {
                                        maxPNum = numberStr;
                                    }
                                }
                            }
                        }
                        for (let i = 0; i < list.length; i++) {
                            let tds = '';
                            let map = new Map();
                            for (let key in list[i]) {
                                if (key.indexOf("processStatus") > -1) {
                                    map.set(key, list[i][key]);
                                }
                            }
                            for (let j = 0; j < tableColumns.length;) {
                                let item = tableColumns[j];
                                if (item.field == 'id') {
                                    tds += '<td style="width:40px;padding: 4px;">' + (i + 1) + '</td>';
                                    j++;
                                } else if (item.field.indexOf('processName') > -1) {
                                    let sn = parseInt(item.field.replace('processName', ''));
                                    let status = list[i]['processStatus' + sn];
                                    let value = list[i][item.field];
                                    let orderNo = list[i]['processOrderNo'+sn];
                                    let fsId = list[i]['id'];
                                    if (value === undefined) {
                                        value = '';
                                    }
                                    let htmlStr='';
                                    if (status === 3 || status === 4) {
                                        htmlStr = '<a href="javascript:void(0)" onclick="jumpPage('+fsId+',\''+value+'\',\''+orderNo+'\')"><label class="badge label-success">'+value+'</label></a>';
                                    } else if (status === 2) {
                                        htmlStr = '<a href="javascript:void(0)" onclick="jumpPage('+fsId+',\''+value+'\',\''+orderNo+'\')"><label class="badge label-warning">'+value+'</label></a>';
                                    } else if (status === 1) {
                                        htmlStr = '<a href="javascript:void(0)" onclick="jumpPage('+fsId+',\''+value+'\',\''+orderNo+'\')"><label class="badge label-default">'+value+'</label></a>';
                                    } else if (status === 0) {
                                        htmlStr = '<a href="javascript:void(0)" onclick="jumpPage('+fsId+',\''+value+'\',\''+orderNo+'\')"><label class="badge label-info">'+value+'</label></a>';
                                    }
                                    tds += '<td style="padding:4px;">' + htmlStr + '</td>';
                                    j++;
                                } else if(item.field.indexOf('transposition') > -1){
                                    let value = list[i][item.field];
                                    if (value === 0) {
                                        value = '';
                                    }else if (value === undefined) {
                                        value = '';
                                    }
                                    tds += '<td style="padding:4px;">' + value + '</td>';
                                    j++;
                                }
                                else {
                                    let value = list[i][item.field];
                                    if (value === undefined) {
                                        value = '';
                                    }
                                    tds += '<td style="padding:4px;">' + value + '</td>';
                                    j++;
                                }
                            }
                            $("#tableTbody").append('<tr data-index="' + i + '">' + tds + '</tr>');
                        }
                    }
                );
            }
        );
    }

    /**
     * 页面跳转
     * @param id 转序主表逐渐
     * @param route 路线
     * @param orderNo 路线顺序
     */
    function  jumpPage(id,route,orderNo){
        // alert("flow_sheet表主键："+id)
        // alert("路线："+route)
        // alert("该路线序号"+orderNo)
        // alert('新功能设计中，敬请期待');
    }
</script>
</body>
</html>